<template>
	<!-- 设置页面 -->
	<view class="setting-page">
		<!-- 设置区域 -->
		<view class="setting-area">
			<!-- 设置修改密码区域 -->
			<view class="setting-amend-psd-area" :style="{ backgroundColor: originalColor }" @mousedown="handDownPsd"
				@mouseup="handUpPsd">
				<!-- 设置修改密码 -->
				<view class="setting-amend-psd">修改密码</view>
				<image class="amend-icon" src="/static/image/settingRightArrow.png"></image>
			</view>
			<!-- 设置提交反馈区域 -->
			<view class="setting-submit-feedback-area" @mousedown="handDownFeedback" @mouseup="handUpFeedback">
				<!-- 设置提交反馈 -->
				<view class="setting-submit-feedback">提交反馈</view>
				<image class="submit-icon" src="/static/image/settingRightArrow.png"></image>
			</view>
			<!-- 设置版本区域 -->
			<view class="setting-versions-area">
				<!-- 设置版本 -->
				<view class="setting-versions">版本</view>
				<span>v1.0.0</span>
			</view>
		</view>
		<!-- 退出登录按钮 -->
		<button class="exit-login-btn" @click="exitLogin">退出登录</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { navigateTo } from '../utils/navigate';
	
	const originalColor = '#ffffff'; // 原始颜色
	const pressedColor = '#e6e6e6'; // 按下时的颜色
	const currentColor = ref(originalColor); // 初始值

	// 修改密码区域鼠标按下的颜色
	const handDownPsd = () => {
		currentColor.value = pressedColor;
		console.log('12331556')
	}
	// 修改密码区域鼠标抬起的颜色
	const handUpPsd = () => {
		currentColor.value = originalColor;
		console.log('123456123456')
	}
	// 提交反馈区域鼠标按下的颜色
	const handDownFeedback = () => {
		currentColor.value = pressedColor;
		console.log('999999999999')
	}
	// 提交反馈区域鼠标抬起的颜色
	const handUpFeedback = () => {
		currentColor.value = originalColor;
		console.log('886886886886')
	}

	// 退出登录按钮
	const exitLogin = () => {
		// switchTab返回到tabBar页面
		uni.switchTab({
			url:'/pages/index/user'
		})	// 清空后跳转用户页面
	}
</script>

<style lang="scss">
	// 设置页面
	.setting-page {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		// 设置区域
		.setting-area {

			// 设置修改密码区域
			.setting-amend-psd-area {
				padding: px2rpx(10) px2rpx(16);
				width: px2rpx(343);
				height: px2rpx(24);
				display: flex;
				align-items: center;
				justify-content: space-between;

				// 设置修改密码
				.setting-amend-psd {}

				// 设置修改图标
				.amend-icon {
					width: px2rpx(16);
					height: px2rpx(24);
				}
			}

			// 设置提交反馈区域
			.setting-submit-feedback-area {
				padding: px2rpx(10) px2rpx(16);
				width: px2rpx(343);
				height: px2rpx(24);
				display: flex;
				align-items: center;
				justify-content: space-between;

				// 设置提交反馈
				.setting-submit-feedback {}

				// 设置提交反馈图标
				.submit-icon {
					width: px2rpx(16);
					height: px2rpx(24);
				}
			}

			// 设置版本区域
			.setting-versions-area {
				padding: px2rpx(10) px2rpx(16);
				width: px2rpx(343);
				height: px2rpx(24);
				display: flex;
				align-items: center;
				justify-content: space-between;

				// 设置版本
				.setting-versions {}
			}
		}

		// 设置退出登录按钮
		.exit-login-btn {
			font-size: px2rpx(14);
			width: px2rpx(374);
			background-color: #ee0a24;
			color: white;
			height: px2rpx(42);
			padding: 0 px2rpx(16);
			margin-bottom: px2rpx(40);
		}
	}
</style>